<!-- author: lizq -->
<!-- date: 2022-06-23 16:35:19 -->
<!-- description: 弹窗 -->
<template>
  <!-- 弹窗 -->
  <div class="dialog-container">
    <el-dialog
      v-model="dialogVisible"
      destroy-on-close
      :title="title"
      :width="width"
      top="20vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="dialogClose"
    >
      <!-- 内容 -->
      <slot name="content"></slot>
      <!-- 按钮 -->
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
const $props = defineProps({
  // 弹窗标题
  title: {
    type: String,
    default: "新增"
  },
  width: {
    type: String,
    default: "50%"
  },
  dialogshow: {
    type: Boolean,
    default: false
  }
});

const $emit = defineEmits(["update:dialogshow", "dialogClose"]);
const dialogVisible = computed({
  get: () => $props.dialogshow,
  set: (val) => $emit("update:dialogshow", val)
});

const dialogClose = () => {
  $emit("dialogClose", 123);
};
</script>
<style lang="scss" scoped>
:deep(.dialog50) {
  .el-dialog {
    min-width: 830px;
  }
}
:deep(.dialog30) {
  .el-dialog {
    min-width: 500px;
  }
}
:deep(.el-form-item:last-of-type) {
  margin-bottom: 40px;
}
</style>
